<template>
  <div class="ageReformApply-info">
    <el-card class="box-card" shadow="always" style="background: #fafafa">
      <template #header>
        <div class="card-header" style="padding-bottom: 4px">
          <span style="font-weight: 600">基本信息</span>
        </div>
      </template>
      <el-row style="padding: 10px 40px">
        <el-col :span="8">
          <span>老人姓名:</span
          ><span style="margin-left: 10px">{{ basicInfo.name }}</span></el-col
        >
        <el-col :span="8"
          ><span style="display: inline-block; width: 68px; text-align: right"
            >性别:</span
          ><span style="margin-left: 10px">{{
            sys_user_sex.find((item) => item.value == basicInfo.sex)
              ? sys_user_sex.find((item) => item.value == basicInfo.sex).label
              : ""
          }}</span></el-col
        >
        <el-col :span="8"
          ><span style="display: inline-block; width: 68px; text-align: right"
            >年龄:</span
          ><span style="margin-left: 10px">{{ basicInfo.age }}</span></el-col
        >
        <el-col :span="24" style="margin-top: 30px">
          <span>家庭住址:</span
          ><span style="margin-left: 10px">{{
            basicInfo.address
          }}</span></el-col
        >
      </el-row>
    </el-card>
    <el-card
      class="box-card"
      shadow="always"
      style="background: #fafafa; margin-top: 15px"
    >
      <template #header>
        <div
          class="card-header"
          style="
            padding-bottom: 4px;
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <span style="font-weight: 600">适老化改造产品</span>
        </div>
      </template>
      <div>
        <div>
          <span>合计金额：</span><span>{{ total }}元</span>
        </div>
        <div style="margin-top: 10px">
          <el-table
            v-loading="loading"
            :data="evaluationCriteriaList"
            stripe
            border
            max-height="250"
          >
            <el-table-column
              label="序号"
              type="index"
              width="80"
              align="center"
            />
            <el-table-column label="产品名称" align="center" prop="name" />
            <el-table-column
              label="单价（元）"
              align="center"
              prop="unitPrice"
            />
            <el-table-column label="数量" align="center" prop="number" />
            <el-table-column
              label="总价（元）"
              align="center"
              prop="totalPrice"
            />
            <el-table-column label="设备编号" align="center" prop="imei" />
            <el-table-column
              label="施工单位"
              align="center"
              prop="constructionUnit"
            />
            <el-table-column
              label="安装人员"
              align="center"
              prop="constructionPersonnel"
            />
            <el-table-column
              label="施工日期"
              align="center"
              prop="constructionDate"
            />
            <el-table-column label="操作" align="center">
              <template #default="scope">
                <span>
                  <el-button link type="primary" @click="info(scope.row)"
                    >查看</el-button
                  >
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
    <el-card
      class="box-card"
      shadow="always"
      style="background: #fafafa; margin-top: 20px"
    >
      <template #header>
        <div class="card-header" style="padding-bottom: 4px">
          <span style="font-weight: 600">改造前照片</span>
        </div>
      </template>
      <div class="demo-image">
        <div
          v-for="(fit, index) in beforeElderlyRemodelGalleryList"
          :key="index"
          style="display: inline-block; margin-left: 20px"
        >
          <el-image
            style="width: 200px; height: 200px"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[fit.imgUrl]"
            :src="fit.imgUrl"
          />
        </div>
      </div>
    </el-card>
    <el-card
      class="box-card"
      shadow="always"
      style="background: #fafafa; margin-top: 20px"
    >
      <template #header>
        <div class="card-header" style="padding-bottom: 4px">
          <span style="font-weight: 600">改造后照片</span>
        </div>
      </template>
      <div class="demo-image">
        <div
          v-for="(fit, index) in afterElderlyRemodelGalleryList"
          :key="index"
          style="display: inline-block; margin-left: 20px"
        >
          <el-image
            style="width: 200px; height: 200px"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="[fit.imgUrl]"
            :src="fit.imgUrl"
          />
        </div>
      </div>
    </el-card>
    <el-dialog
        v-model="open"
        :title="title"
        append-to-body
        width="800px"
        v-if="open"
        @close="cancel"
        :close-on-click-modal="false"
    >
      <prodect-form
          @closed="cancel"
          :homeBedApplyId="basicInfo.id"
          :formatDate="formatDate"
          :flag="disAbledFlag"
      ></prodect-form>
    </el-dialog>
  </div>
</template>
<script setup>
import { onMounted } from "vue";
import { elderlyOrientedRemodelInfo, productList } from "@/api/AgeAppropriate";
import prodectForm from "../ageReform/project_form.vue";
const { proxy } = getCurrentInstance();
const { applyId } = defineProps(["applyId"]);
const { sys_user_sex } = proxy.useDict("sys_user_sex");
const beforeElderlyRemodelGalleryList = ref([]);
const afterElderlyRemodelGalleryList = ref([]);
const evaluationCriteriaList = ref([]);
const loading = ref(false);
const total = ref(0);
const title = ref("");
const open = ref(false);
const disAbledFlag = ref(false);

const data = reactive({
  form: {},
  basicInfo: {},
  formatDate: {},
});
const { form, basicInfo,formatDate } = toRefs(data);

onMounted(() => {});
function info(row) {
  formatDate.value = row;
  formatDate.value.typeId = row.typeId - 0;
  title.value = "查看适老化改造产品";
  disAbledFlag.value = true;
  open.value = true;
}

function cancel(data) {
  if (data) {
    getProductList(basicInfo.value.id);
  }
  open.value = false;
  formatDate.value = {};
  disAbledFlag.value = false;
}

function getInfo(id) {
  elderlyOrientedRemodelInfo(id).then((res) => {
    console.log("res=====", res);
    basicInfo.value.name = res.elderlyOrientedInfo.applyName;
    basicInfo.value.age = res.elderlyOrientedInfo.age;
    basicInfo.value.sex = res.elderlyOrientedInfo.sex;
    basicInfo.value.address = res.elderlyOrientedInfo.address;
    basicInfo.value.id = res.elderlyOrientedInfo.id;
    // checkAcceptForm.value.checkAcceptResult = res.elderlyOrientedInfo.checkAcceptResult
    // checkAcceptForm.value.checkAcceptNotes = res.elderlyOrientedInfo.checkAcceptNotes
    if (res.elderlyOrientedInfo.beforeElderlyRemodelGalleryList.length > 0) {
      for (let i in res.elderlyOrientedInfo.beforeElderlyRemodelGalleryList) {
        if (res.elderlyOrientedInfo.beforeElderlyRemodelGalleryList[i].imgUrl) {
          res.elderlyOrientedInfo.beforeElderlyRemodelGalleryList[i].url =
            res.elderlyOrientedInfo.beforeElderlyRemodelGalleryList[i].imgUrl;
          beforeElderlyRemodelGalleryList.value =
            res.elderlyOrientedInfo.beforeElderlyRemodelGalleryList;
        }
      }
    }
    if (res.elderlyOrientedInfo.afterElderlyRemodelGalleryList.length > 0) {
      for (let i in res.elderlyOrientedInfo.afterElderlyRemodelGalleryList) {
        if (res.elderlyOrientedInfo.afterElderlyRemodelGalleryList[i].imgUrl) {
          res.elderlyOrientedInfo.afterElderlyRemodelGalleryList[i].url =
            res.elderlyOrientedInfo.afterElderlyRemodelGalleryList[i].imgUrl;
          afterElderlyRemodelGalleryList.value =
            res.elderlyOrientedInfo.afterElderlyRemodelGalleryList;
        }
      }
    }

  });
}
function getProductList(id) {
  productList(id).then((res) => {
    evaluationCriteriaList.value = res.productInfo.productList;
    total.value = res.productInfo.totalPrice;
  });
}
getInfo(applyId);
getProductList(applyId);
</script>
<style scoped lang="scss"></style>
